<template>
	<globalModal
		:title="title"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<a-form-item label="产品类型">
					<a-select
						allowClear
						placeholder="请选择接产品类型"
						v-decorator="['prodTypeId', { rules: [{ required: true, message: '请选择产品类型' }] }]"
					>
						<a-select-option
							:value="item.prodTypeId"
							v-for="(item, index) in proTypeList"
							:key="item.prodTypeId"
							>{{ item.prodTypeName }}</a-select-option
						>
					</a-select>
				</a-form-item>
				<a-form-item label="产品名称">
					<a-input
						placeholder="产品名称"
						v-decorator="[
							'deviceTypeName',
							{
								rules: [
									{ required: true, message: '请输入产品名称' },
									{ max: 30, message: '产品名称不超过30个字符' },
								],
								getValueFromEvent: removeSpaces,
							},
						]"
					/>
				</a-form-item>
				<a-form-item label="产品编号">
					<a-input
						placeholder="产品编号"
						v-decorator="[
							'deviceTypeCode',
							{
								rules: [{ required: true, message: '请输入产品编号' }],
								getValueFromEvent: removeSpaces,
							},
						]"
					/>
				</a-form-item>
				<a-form-item label="产品图片">
					<a-upload
						list-type="picture-card"
						class="avatar-uploader"
						:show-upload-list="false"
						:before-upload="beforeUpload"
						v-decorator="[
							'imgUrl',
							{ rules: [{ required: false, message: '上传图片' }], valuePropName: 'imgUrl' },
						]"
					>
						<img
							v-if="deviceTypeImg"
							:src="fileUrl + deviceTypeImg.split(';')[0]"
							alt="avatar"
							style="width: 128px; height: 128px"
						/>
						<div v-else>
							<a-icon :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text">上传图片</div>
						</div>
					</a-upload>
				</a-form-item>
			</a-form>
		</a-spin>
	</globalModal>
</template>

<script>
import { deviceManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import changeDeptModal from '@/components/changeDeptModal.vue';
export default {
	name: 'addOrEditDeviceTypeModal',
	mixins: [ModalMixins],
	components: {
		changeDeptModal,
	},
	data() {
		return {
			proTypeList: [],
			loading: false,
			deviceTypeImg: '',
			fileUrl: process.env.VUE_APP_FILE_API,
		};
	},
	created() {},
	methods: {
		initInfo(record = {}) {
			this.mdl = Object.assign({}, record);
			this.title = (this.isAdd ? '新增' : '编辑') + this.modalTitle;
			this.visible = true;
			this.deviceTypeImg = record.imgUrl;
			//获取一些初始下拉数据
			this.getDefaultList && this.getDefaultList();
		},
		async getDefaultList() {
			if (this.proTypeList.length == 0) {
				await this.getProTypeListList();
			}
			this.$nextTick(() => {
				this.form.resetFields();
				this.setFieldsValue();
			});
		},
		getProTypeListList(keys) {
			var param = keys;
			this.$postAction(deviceManageapi.prodTypeUrl.getList, {}).then((res) => {
				if (res.code == 1) {
					this.proTypeList = res.data;
				}
			});
		},
		// 上传头像前校验
		beforeUpload(file) {
			const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
			if (!isJpgOrPng) {
				this.$message.error('只能上传jpg/png格式的图片');
				return;
			}
			const isLt10M = file.size / 1024 / 1024 < 10;
			if (!isLt10M) {
				this.$message.error('图片不得大于10MB!');
				return;
			}
			this.uploadFiles(file);
			return false;
			/* return isJpgOrPng && isLt10M; */
		},
		uploadFiles(file) {
			let formdata = new FormData();
			formdata.append('file', file);
			this.$postActionUpload(this.$api.uploadFile, formdata)
				.then((res) => {
					if (res.code == 1) {
						this.deviceTypeImg = res.data;
						this.$message.success('上传成功');
					}
				})
				.catch((err) => {})
				.finally((res) => {});
		},
		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					console.log('val', values);
					let id = this.mdl[this.editKey];
					let parameter = Object.assign(
						{},
						values,
						{ imgUrl: this.deviceTypeImg },
						id
							? {
									[this.editKey]: id,
							  }
							: ''
					);
					_this.confirmLoading = true;
					this.saveInfo(this.isAdd ? this.api.add : this.api.edit, parameter);
				}
			});
		},
	},
};
</script>
<style scoped lang="less">
/deep/ .ant-checkbox-group {
	margin: 0 -4px;
}

/deep/ .ant-checkbox-wrapper {
	margin: 0 4px;
}
</style>
